import React from "react";
import { Dimensions, Image, Platform, StyleSheet, Text, TouchableOpacity, View } from "react-native";
import Label from "teaset/components/Label/Label";
import Button from "teaset/components/Button/Button";
import Stepper from "teaset/components/Stepper/Stepper";


const WIN_WIDTH = Dimensions.get("window").width;

//商品购买界面
class GoodBuyView extends React.PureComponent {

  completeBuy = () => {
    if (this.props.completion) {
      this.props.completion(this.state.goodCount);
    }
  };

  cancleBuy = () => {
    if (this.props.cancle) {
      this.props.cancle();
    }
  };

  constructor(props) {
    super(props);
    this.state = { selectButtonIndex: 0, goodCount: 1 };
    this.completeBuy = this.completeBuy.bind(this);
    this.cancleBuy = this.cancleBuy.bind(this);
  }

  componentDidMount() {
  }

  render() {

    let titles = ["B130(正常）", "B140(正常）", "130T(加肥加大)", "150T(加肥加大)", "150T(加肥加大)", "150T(加肥加大)"];

    let buttons = titles.map((value, index) => {
      // let style = this.state.selectButtonIndex === index ? styles.selectedButtonStyle : styles.buttonStyle;
      // let textStyle = this.state.selectButtonIndex === index ? styles.selectedButtonTextStyle : styles.buttonTextStyle;
      //
      if (this.state.selectButtonIndex === index) {
        return (
          <Button title={value} titleStyle={styles.selectedButtonTextStyle} style={styles.selectedButtonStyle}
                  onPress={() => {
                    this.setState({ selectButtonIndex: index });
                  }} key={index}/>
        );
      }
      else {
        return (
          <Button title={value} titleStyle={styles.buttonTextStyle} style={styles.buttonStyle}
                  onPress={() => {
                    this.setState({ selectButtonIndex: index });
                  }} key={index}/>
        );
      }
    });

    let buttonTitle = this.props.type === "buy" ? "结算" : "确定";
    let imageMarginTop = Platform.OS === "ios" ? -10 : 10;
    return (<View style={{
      backgroundColor: "white",
      justifyContent: "center",
      alignItems: "stretch"
    }}>
      <View style={{ flexDirection: "row", justifyContent: "space-between" }} overflow={"visible"}>
        <View style={{ flexDirection: "row" }} overflow={"visible"}>
          <Image
                 style={{backgroundColor:'red', width: 80, height: 80, borderRadius: 5, marginLeft: 10, marginTop: imageMarginTop }}
                 overflow={"visible"}/>
          <View style={{ marginLeft: 5, alignSelf: "flex-end" }}>
            <Text style={{ color: "#a72126", fontSize: 14 }}>￥99</Text>
            {/*<Text style={{ color: "#1a1a1a", fontSize: 13 }}>已选 B130(正常) </Text>*/}
            <Text style={{ color: "#1a1a1a", fontSize: 13 }}>库存可用量 ：99</Text>
          </View>
        </View>
        <TouchableOpacity style={{ padding: 10 }} onPress={this.cancleBuy}>
          <Image
                 style={{backgroundColor:'red', width: 20, height: 20 }}/>
        </TouchableOpacity>
      </View>
      {/*
      <View style={{
        paddingLeft: 10,
        paddingTop: 20,
        paddingBottom: 10,
        borderBottomWidth: 1,
        borderBottomColor: "#eeeeee"
      }}>
        <Label type='default' size='md' text={"选择尺码"}/>
      </View>
      <View style={{
        flexWrap: "wrap",
        flexDirection: "row",
        marginTop: 10,
        marginLeft: 10
      }}>
        {buttons}
      </View>
      */}
      <View style={{
        paddingLeft: 10,
        paddingTop: 20,
        paddingBottom: 10,
        paddingRight: 10,
        borderBottomWidth: 1,
        borderBottomColor: "#eeeeee",
        justifyContent: "space-between",
        flexDirection: "row"
      }}>
        <Label type='default' size='md' text={"购买数量"}/>
        <Stepper value={this.state.goodCount} step={1} onChange={(value) => {
          this.setState({ goodCount: value });
        }} showSeparator={false} style={{ height: 30, borderWidth: 0 }}/>
      </View>
      <Button title={buttonTitle} titleStyle={{ color: "white", fontSize: 14 }}
              style={{
                backgroundColor: "#a72126",
                borderWidth: 0,
                borderRadius: 0,
                height: 40
              }}
              onPress={this.completeBuy}
      />
    </View>)
      ;
  }
}

const styles = StyleSheet.create({
  selectedButtonTextStyle: {
    color: "#a72126",
    fontSize: 13
  },
  selectedButtonStyle: {
    borderColor: "#a72126",
    borderWidth: 1,
    borderRadius: 15,
    height: 30,
    marginRight: 10,
    marginBottom: 10,
    width: (WIN_WIDTH - 40) / 3
  },
  buttonTextStyle: {
    color: "#333",
    fontSize: 13
  },
  buttonStyle: {
    borderColor: "#d1d1d1",
    borderWidth: 1,
    height: 30,
    borderRadius: 15,
    marginRight: 10,
    marginBottom: 10,
    width: (WIN_WIDTH - 40) / 3
  }
});
export default GoodBuyView;
